<template>
  <div>

    <tab v-model="tabindex">
      <tab-item>点餐</tab-item>
      <tab-item>服务</tab-item>
    </tab>
    <!-- 点餐界面 -->
    <div class="goods" v-show="tabindex == 0">
      <!-- 左侧菜单 -->
      <!-- <scroller lock-x height="-140" ref="leftScr"> -->
      <!-- <view-box> -->
      <div class="menu-wrapper" ref="menuRef">
        <div>
          <div class="menu-item" v-for="(item, index) in getTypes" v-if="item!=''" :key="index" :class="{'current': currentTypeIndex === index}" @click="selectMenu(index, $event)">
            <span class="text">
              {{ item }}
            </span>
          </div>

        </div>
      </div>
      <!-- </view-box> -->
      <!-- </scroller> -->
      <!-- 右侧食物列表 -->
      <!-- <scroller lock-x height="-140" ref="rightScr"> -->

      <div class="foods-wrapper" ref="foodsRef">

        <!-- <view-box ref="rightbox"> -->

        <div class="foods-list">
          <!-- 头部内容 -->
          <!-- <div class="title">
              <span> {{ getTypeName }}</span>
            </div> -->

          <!-- <cell-box v-for="food in getTypeFoods" v-if="food.isShowClient==1" :key="food.id" class="foods-item"> -->
          <div v-for="food in getTypeFoods" v-if="food.isShowClient==1" :key="food.id" class="foods-item">
            <!-- 图片 -->
            <div class="icon">
              <img v-lazy="food.imgUrl_reduce" :onerror="defaultImg" @click="showImg(food.imgUrl)" />
            </div>
            <!-- 右边内容 -->
            <div class="content">
              <h2 class="name">{{ food.name }} </h2>
              <p class="desc">{{ food.explain }}</p>
              <p class="desc">{{ food.describe}}</p>
              <!-- <div class="extra">
                  <span class="count">月售{{ food.monthlySales }}份</span>
                </div> -->
              <div class="price">
                <span class="now">￥{{ food.specs[0].price }}</span>
                <span class="old" v-show="food.specs[0].oldPrice!=food.specs[0].price">￥{{ food.specs[0].oldPrice }}</span>
              </div>
              <div class="control">

                <cart-control :food="food" :cartdata="CartDataMap" :control="true" @addCart="addCart" @subtractCart="subtractCart" ref="controlref"></cart-control>

              </div>
            </div>
          </div>
          <!-- </cell-box> -->
        </div>
        <!-- </view-box> -->

      </div>

      <!-- </scroller> -->
      <!-- 购物车 -->
      <shop-cart :cartdata="CartDataMap" :czinfo="czinfo" :binfo="business" :cartdataNum="CartDataNum" :cartdataJine="CartDataJine" @setNull="setNull" @addCart="addCart" @subtractCart="subtractCart" @deleteItem="deleteItemCart"></shop-cart>
      <!-- 图片查看 -->
      <img-preview ref="ImgPreviewRef"></img-preview>

    </div>
    <div class="good" v-show="tabindex == 1">
      <callservice></callservice>
    </div>
    <!-- 选择餐桌 -->
    <div>
      <popup v-model="showcz" height="auto" class="popup">
        <!-- group already has a top border, so we need to hide header's bottom border-->
        <popup-header left-text="取消" right-text="确定" title="请选择餐桌" :show-bottom-border="false" @on-click-left="showcz=false" @on-click-right="czcheck" class="popup-header"></popup-header>
        <div class="popup-context">
          <group gutter="0">
            <div v-for="(itemlx,indexlx) in czlx" :key="indexlx">
              <divider>{{itemlx.mingc}}</divider>

              <checker v-model="czid" default-item-class="item" selected-item-class="item-selected">

                <checker-item v-for="(itemcz,indexcz) in czlist" :key="indexcz" v-if="itemcz.bcanzLxId==itemlx.id" :value="itemcz.id">{{itemcz.zhuoh}}</checker-item>

              </checker>
            </div>

          </group>
        </div>
      </popup>
    </div>
  </div>
</template>
<script>
import BScroll from "better-scroll";
import { sign, signStr } from "@/assets/js/sign.js";
import {
  Tab,
  TabItem,
  Swiper,
  SwiperItem,
  ViewBox,
  Scroller,
  Group,
  CellBox,
  PopupHeader,
  Popup,
  TransferDom,
  Checker,
  CheckerItem,
  Divider
} from "vux";
import ImgPreview from "@/components/base/img-preview";
import CartControl from "@/components/base/cart-control";
import ShopCart from "@/components/base/shop-cart";
import callservice from "@/components/CallService";
export default {
  components: {
    Tab,
    TabItem,
    Swiper,
    SwiperItem,
    ViewBox,
    Scroller,
    Group,
    CellBox,
    ImgPreview,
    CartControl,
    ShopCart,
    callservice,
    PopupHeader,
    Popup,
    TransferDom,
    Checker,
    CheckerItem,
    Divider
  },
  data() {
    return {
      msg: "",
      showSpace: false,
      currentTypeIndex: 0,
      business: null,
      czinfo: null,
      goods: [],
      defaultImg: 'this.src="' + require("@/assets/img/logo.png") + '"',
      // 购物车
      CartDataMap: {},
      CartDataNum: 0,
      CartDataJine: 0,
      paixh: 0,
      tabindex: 0,
      showcz: false,
      czlx: null,
      czlist: null,
      czid: 0
    };
  },
  methods: {
    refresh() {
      let params = signStr("/v1/api/goods/getList");
      this.$http
        .get("goods/getList?sellerid=" + this.business.id + "&" + params)
        .then(res => {
          if (res.data.code === 1) {
            this.goods = [];
            this.goods = res.data.resultObject;
            this.currentTypeIndex = 0;
          }
        })
        .catch(err => {
          console.log(err);
        });

      this.$nextTick(() => {
        this.menuScroll = new BScroll(this.$refs.menuRef, {
          click: true,
          scrollX: false
        });

        this.foodsScroll = new BScroll(this.$refs.foodsRef, {
          click: true,
          scrollX: false
        });
      }, 200);
    },

    selectMenu(index, event) {
      this.currentTypeIndex = index;
      this.foodsScroll.scrollTo(0, 0);
    },
    showImg(url) {
      this.$refs.ImgPreviewRef.show(url);
    },
    addCart(
      target,
      _id,
      _bcaipId,
      _bcaipListId,
      _taocbz,
      _mingc,
      _guig,
      _danw,
      _danj,
      _zhek,
      _danjYj,
      _sxids,
      _beiz,
      _beiz1
    ) {
      //性能优化，异步异步执行下落动画
      this.$nextTick(() => {
        //this.$refs.shopcartRef.drop(target);
        //拼接key
        let key = _bcaipListId + _sxids;

        //查询购物车里是否有这个key
        if (this.CartDataMap.hasOwnProperty(key)) {
          //查找key是否存在
          let item = this.CartDataMap[key];

          item.shul += 1;
          item.ketsl += 1;
          let jine = parseFloat(item.shul) * parseFloat(item.danj);
          let jineYj = parseFloat(item.shul) * parseFloat(item.danjYj);
          item.jine = jine;
          item.jineYj = jineYj;

          this.CartDataNum += 1;
          this.CartDataJine += parseFloat(item.danj);
        } else {
          this.paixh += 1; //Object.keys(this.CartDataMap).length+1;
          //不存在
          var cartentity = {
            id: _id,
            kshangjDdLsId: 0,
            bcaipId: _bcaipId,
            bcaipListId: _bcaipListId,
            taocbz: _taocbz,
            bcaipTcId: null,
            mingc: _mingc,
            guig: _guig,
            danw: _danw,
            danj: _danj,
            zhek: _zhek,
            danjYj: _danjYj,
            shul: 1,
            jine: parseFloat(_danj),
            jineYj: parseFloat(_danjYj),
            createTime: null,
            youxbz: 1,
            shuxids: _sxids,
            beiz: _beiz,
            paixh: this.paixh
          };
          this.CartDataNum += 1;
          this.CartDataJine += parseFloat(_danj);

          this.$set(this.CartDataMap, key, cartentity);
          // console.log(this.CartDataMap);
        }
      });
    },
    deleteItemCart(key) {
      if (this.CartDataMap.hasOwnProperty(key)) {
        var item = this.CartDataMap[key];
        this.CartDataNum -= item.shul;
        this.CartDataJine -= item.jine;
      }
      this.$delete(this.CartDataMap, key);
    },
    subtractCart(_id, _bcaipListId, _sxids) {
      let key = _bcaipListId + _sxids;

      if (this.CartDataMap.hasOwnProperty(key)) {
        //查找key是否存在
        let item = this.CartDataMap[key];
        if (item.shul > 1) {
          item.shul -= 1;
          item.ketsl -= 1;
          let jine = parseFloat(item.shul) * parseFloat(item.danj);
          item.jine = jine;
          item.jineYj = parseFloat(item.shul) * parseFloat(item.danjYj);
          this.CartDataNum -= 1;
          this.CartDataJine -= parseFloat(item.danj);
        } else {
          this.CartDataNum -= 1;
          this.CartDataJine -= parseFloat(item.danj);
          this.$delete(this.CartDataMap, key); // this.CartDataMap.delete(key);
        }
      }
    },
    setNull() {
      //this.CartData = [];
      this.CartDataMap = {};
      this.paixh = 0;
      this.CartDataNum = 0;
      this.CartDataJine = 0;
      this.$refs.controlref.forEach(item => {
        item.setMor();
      });
    },
    showCzCheck() {
      let params = sign("/v1/api/GetCzList");
      params.append("sjid", this.business.id);
      this.$http
        .post("GetCzList", params)
        .then(ret => {
          if (ret.status == 200) {
            var _data = ret.data.resultObject;
            var _code = ret.data.code;
            var _msg = ret.data.msg;
            if (_code == 1) {
              this.czlx = _data.leixs;
              this.czlist = _data.czlist;
              this.czlist.forEach(item => {
                this.czlx.forEach(lx => {
                  if (lx.id == item.bcanzLxId) {
                    item.bcanzLxMc= lx.mingc;
                  }
                });
              });

              this.showcz = true;
            } else {
              this.$vux.toast.text(_msg, "top");
            }
          } else {
            this.$vux.toast.text("请求出错！", "top");
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    czcheck() {
      if (this.czid == 0) {
        this.$vux.toast.text("请选择餐桌", "bottom");
        return;
      }
      this.czlist.forEach(item => {
        if (item.id == this.czid) {
          this.$store.commit("addCzInfo", item);
          this.czinfo = item;
        }
      });
      if (this.$store.getters.getCzId != 0) {
        this.refresh();
        this.showcz = false;
      }
    }
  },
  computed: {
    getTypes() {
      let types = [];
      this.goods.forEach(type => {
        let num = 0;
        type.foods.forEach(item => {
          if (item.isShowClient == 1) {
            num++;
            return false;
          }
        });
        if (num > 0) {
          types.push(type.typeName);
        } else {
          types.push("");
        }
      });
      return types;
    },
    getTypeName() {
      return this.goods[this.currentTypeIndex].typeName;
    },
    getTypeFoods() {
      if (this.goods[this.currentTypeIndex] != null) {
        return this.goods[this.currentTypeIndex].foods;
      }
      return null;
    }
  },

  created() {
    this.business = this.$store.state.sellerInfo;
    if (this.$store.getters.getCzId != 0) {
      this.czinfo = this.$store.state.czInfo;
      this.refresh();
    } else {
      this.showCzCheck();
    }
  },
  activated() {
    this.$emit("viewIn", "cplist");
    if (this.$store.getters.getCzId == 0) {
      // console.log("aaa");
      this.showCzCheck();
    }
  }
};
</script>
<style lang="scss" scoped>
@import "~@/assets/scss/const.scss";
@import "~@/assets/scss/mixin.scss";
.goods {
  display: flex;
  position: absolute;
  top: 44px;
  bottom: 100px;
  width: 100%;
  background-color: #fff;
  overflow: hidden;
  .menu-wrapper {
    flex: 0 0 80px;
    width: 100%;
    text-align: center;
    background-color: #fff;
    .menu-item {
      display: table;
      height: 40px;
      line-height: 14px;
      width: 80px;
      padding-left: 0px;
      text-align: center;

      @include onepx("bottom", true);
      &.current {
        margin-top: 1px;
        position: relative;
        background-color: #ffa500;
        color: #fff;
        font-weight: 700;
        z-index: 1;
      }
      .text {
        text-align: center;
        font-size: 16px;
        display: table-cell;
        vertical-align: middle;
      }
    }
  }
  .foods-wrapper {
    flex: 1;
    .foods-list {
      text-align: left;

      .title {
        margin-top: 1px;
        padding-left: 10px;
        height: 20px;
        line-height: 20px;
        border-left: 2px solid #ffa500;
        font-size: 16px;
        color: #fff;
        background-color: #ffa500;
      }
      .foods-item {
        position: relative;
        display: flex;
        padding: 10px;
        @include onepx("bottom", true);
        .icon {
          flex: 0, 0, 100px;
          width: 100px;
          height: 100px;
          margin-right: 10px;

          img {
            width: 100px;
            height: 90px;
          }
        }
        .content {
          flex: 1;
          .name {
            font-size: 18px;
            margin: 2px 0 2px 0;
            height: 14px;
            line-height: 10px;
            color: rgb(7, 17, 27);
            margin-bottom: 8px;
          }
          .desc {
            margin-top: 8px;
            line-height: 14px;
            font-size: 16px;
            color: rgb(147, 153, 159);
          }
          .extra {
            line-height: 12px;
            font-size: 16px;
            color: rgb(147, 153, 159);
            .count {
              font-size: 10px;
              margin-right: 12px;
            }
            .rating {
              font-size: 10px;
            }
          }
          .price {
            font-weight: 700;
            line-height: 18px;
            .now {
              margin-right: 18px;
              font-size: 18px;
              color: rgb(240, 20, 20);
            }
            .old {
              font-size: 16px;
              color: rgb(147, 153, 159);
              text-decoration: line-through;
            }
          }
          .control {
            position: absolute;
            right: 5px;
            bottom: 10px;
            padding-right: 5px;
          }
        }
      }
    }
  }
}
.item {
  width: 100px;
  height: 30px;
  line-height: 26px;
  text-align: center;
  border-radius: 5px;
  border: 1px solid #1aad19;
  color: #1aad19;
  background-color: #fff;
  margin: 5px 5px 5px;
}
.item-selected {
  background: #ffffff url(../assets/img/iconfont-dagouxuanzhong.png) no-repeat
    right bottom;
  border-color: #ff4c4c;
  color: #ff4c4c;
}

.popup-header {
  position: fixed;

  width: 100%;
  height: 40px;
  z-index: 999;
}
.popup-context {
  margin-top: 40px;
}
</style>